<template>
  <!-- 消息提示 -->
  <div class="content">
    <!-- 发货通知 -->
    <div class="body" v-if="$route.params.type == 'notice'">
      <div class="header">
        <div class="back">
          <i class="el-icon-arrow-left" @click="getBack"></i>消息详情
        </div>
        <el-divider></el-divider>
        <div class="title-header">
          <div class="left">
            <h2>订单{{ $route.params.id }}发货通知单</h2>
            <div><span>时间：2022-10-10 00:00:00 </span></div>
          </div>
          <div class="right">
            <el-button type="warning">待确认</el-button>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="btns">
          <el-button type="primary" @click="handleConfirm()"
            >确认收货单</el-button
          >
          <el-button type="danger" @click="handleCallBack">反馈</el-button>
        </div>
        <el-table
          v-loading="loading"
          ref="mytable"
          :height="tableHeight"
          :data="tableData"
          :header-cell-style="{
            'background-color': 'rgba(0, 0, 0, .04)',
            'text-align': 'center',
            color: '#000',
          }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="orderID" label="订单号">
            <template v-slot="{ row }">
              <el-link type="primary">{{ row.orderID }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="orderId" label="型号"></el-table-column>
          <el-table-column prop="partnumber" label="品牌"></el-table-column>
          <el-table-column prop="brand" label="数量"></el-table-column>
          <el-table-column prop="brand" label="尾款">
            <template v-slot="{ row }">
              <el-link type="success">{{ row.brand }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="brand" label="币种"></el-table-column>
          <el-table-column prop="date" label="交货日期"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 发货变更 -->
    <div v-else class="body">
      <div class="header">
        <div class="back">
          <i class="el-icon-arrow-left" @click="getBack"></i>消息详情
        </div>
        <el-divider></el-divider>
        <div class="title-header">
          <div class="left">
            <h2>发货变更通知</h2>
            <div><span>时间：2022-10-10 00:00:00 </span></div>
          </div>
          <div class="right">
            <el-button type="warning">待确认</el-button>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="btns">
          <el-button type="primary" @click="handleConfirm()">确认</el-button>
          <el-button type="danger" @click="handleCallBack">反馈</el-button>
        </div>
        <el-table
          v-loading="loading"
          ref="mytable"
          :height="tableHeight"
          :data="tableData"
          :header-cell-style="{
            'background-color': 'rgba(0, 0, 0, .04)',
            'text-align': 'center',
            color: '#000',
          }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="orderID" label="订单号">
            <template v-slot="{ row }">
              <el-link type="primary">{{ row.orderID }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="orderId" label="型号"></el-table-column>
          <el-table-column prop="partnumber" label="品牌"></el-table-column>
          <el-table-column prop="brand" label="数量"></el-table-column>

          <el-table-column
            prop="a"
            label-class-name="red-font"
            class-name="red-font"
            label="申请交货数量"
          ></el-table-column>
          <el-table-column prop="brand" label="原交货日期"></el-table-column>
          <el-table-column
            prop="b"
            label-class-name="red-font"
            class-name="red-font"
            label="更改交货日期"
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 弹出提示 -->
    <el-dialog :visible.sync="dialogAffirmVisible" width="30%" class="affirm-dialog" top="35vh">
      <div class="affirm-box">
        <img class="icon" src="@/assets/image/index/warning.png" alt=""/>
        <p v-if="dialogType == 1">确认此发货通知单内容数量交货时间无误</p>
        <p v-if="dialogType == 2">确认此发货变更内容，将按最新约定发货</p>
      </div>
      <span slot="footer" style="text-align: center">
        <el-button type="primary" size="small" @click="dialogAffirmVisible = !dialogAffirmVisible">保存</el-button>
        <el-button size="small" @click="dialogAffirmVisible = !dialogAffirmVisible">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="反馈"
      width="35%"
      top="35vh"
      :visible.sync="dialogVisible"
      class="feedback-dialog"
    >
      <div style="text-align: center">
        <img src="@/assets/image/index/wait.png" alt="" class="pic"/>
        <div v-if="dialogType == 3" class="feedback-tit">
          请确认发货通知单反馈
        </div>
        <div v-if="dialogType == 4" class="feedback-tit">
          请反馈发货变更通知问题
        </div>
        <p class="tips">（具体反馈线下联系修改）</p>
      </div>
      <span slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" size="small" @click="dialogVisible = !dialogVisible">保存</el-button>
        <el-button size="small" @click="dialogVisible = !dialogVisible">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "messagePromptDetail",
  data() {
    return {
      loading: false,
      tableData: [],
      tableHeight: 300,
      // 是否显示弹出
      dialogAffirmVisible:false,
      dialogVisible: false,
      // 弹出提示标题
      dialogTitle: "",
      // 是谁弹出的提示
      dialogType: null,
    };
  },
  created() {
    this.getTableData();
  },
  mounted() {
    // 设置预览区域大小  最少320px
    this.$nextTick(() => {
      let ele = document.getElementsByClassName("content");
      if (ele) {
        this.tableHeight = document.body.clientHeight - ele[0].offsetTop - 340;
        if (this.tableHeight > 300) {
          this.$refs.mytable &&
            this.$refs.mytable.layout.setHeight(this.tableHeight);
          this.$refs.mytable && this.$refs.mytable.doLayout();
        }
      }
    });
  },
  methods: {
    // 跳转
    getBack() {
      this.$router.push('/home/messagePrompt')
    },
    // 获取数据
    getTableData() {
      this.loading = true;
      setTimeout(() => {
        this.tableData = [
          {
            orderID: "DD22020000294",
            partnumber: "12312321",
            brand: "qweqwe",
            date: "2022-2-2",
            a: 132,
            b: 3,
          },
          {
            orderID: "DD220200012394",
            partnumber: "12312321",
            brand: "qweqwe",
            date: "2022-2-2",
          },
          {
            orderID: "DD220200031294",
            partnumber: "12312321",
            brand: "qweqwe",
            date: "2022-2-2",
          },
        ];
        this.loading = false;
      }, 500);
    },
    // 确认
    handleConfirm() {
      if (this.$route.params.type == "notice") {
        this.dialogType = 1;

      } else {
        this.dialogType = 2;
      }
      this.dialogAffirmVisible = true;
    },
    // 反馈
    handleCallBack() {
      if (this.$route.params.type == "notice") {
        this.dialogType = 3;
      } else {
        this.dialogType = 4;
      }
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  font-size: 19px;
  .body {
    .header {
      background: #fff;
      border-radius: 11px;
      font-size: 21px;
      font-weight: 500;
      color: #000000;
      line-height: 29px;
      margin-bottom: 20px;
      .back {
        padding: 24px 0 0 10px;
        i {
          margin-right: 10px;
          &:hover {
            color: #0782eb;
          }
        }
      }
    }
    .bottom {
      background: #ffffff;
      border-radius: 11px;
      padding: 10px 15px;
    }
    .el-link.el-link--default {
      color: #333;
      :hover {
        color: #409eff;
      }
    }
    .title-header {
      border-radius: 5px;
      padding: 0px 15px 30px 40px;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        span {
          font-size: 21px;
          font-weight: 400;
          color: #666666;
          line-height: 29px;
          margin-top: 10px;
          display: block;
        }
      }
    }
    .btns {
      margin: 15px 10px;
    }
  }
  .affirm-box {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    color: rgba(0,0,0,0.88);
    line-height: 32px;
    .icon{
      width: 32px;
      height: 32px;
      display: block;
      margin-right: 5px;
    }
  }
  .feedback-dialog{
    .feedback-tit{
      font-size: 20px;
      font-weight: 600;
      color: #333333;
      line-height: 29px;
      margin: 20px 0 5px;
    }
    .pic{
      width: 80px;
      height: 80px;
      display: block;
      margin: auto;
    }
    .tips{
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      line-height: 23px;
    }
  }
}

</style>

